<template>
	<view class="container">
		<view class="login-box">
			<button type="primary" open-type="getUserInfo" class="wx-login-btn" @getuserinfo="wxLogin">微信直接登录</button>
			<button type="primary" class="account-login-btn" @tap="accountLogin">账号登录</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {

		computed: {
			...mapState(['hasLogin', 'user', 'code'])
		},
		data() {
			return {

			}
		},
		onShow: function() {
			// 页面显示
			let userInfo = this.$storage.getStorageSync('userInfo');
			if (userInfo != null && userInfo != '') {
				this.login(userInfo);
			}
			if (this.hasLogin) {
				uni.navigateBack({
					delta: 1
				})
			}
		},
		methods: {
			...mapMutations(['setCode', 'login']),
			wxLogin: function(e) {
				if (e.detail.userInfo == undefined) {
					this.$util.showErrorToast('微信登录失败');
					return;
				}
				this.$userJs.checkLogin().catch(() => {

					this.$userJs.loginByWeixin(e.detail.userInfo).then(res => {
						console.log(res);
						uni.navigateBack({
							delta: 1
						})
					}).catch((err) => {
						console.log(err);
						this.$util.showErrorToast('微信登录失败');
					});

				});
			},
			accountLogin: function() {
				uni.navigateTo({
					url: "/pages/auth/accountLogin/accountLogin"
				});
			}
		}
	}
</script>

<style>
	.login-box {
		width: 100%;
		height: auto;
		overflow: hidden;
		padding: 0 40rpx;
		margin-top: 200rpx;
		background: #f4f4f4;
	}

	.wx-login-btn {
		margin: 60rpx 0 40rpx 0;
		height: 96rpx;
		line-height: 96rpx;
		font-size: 30rpx;
		border-radius: 6rpx;
		width: 90%;
		color: #fff;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		position: flex;
		bottom: 0;
		left: 0;
		padding: 0;
		margin-left: 5%;
		text-align: center;
		/* padding-left: -5rpx; */
		border-top-left-radius: 50rpx;
		border-bottom-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		border-bottom-right-radius: 50rpx;
		letter-spacing: 3rpx;
	}

	.account-login-btn {
		width: 90%;
		margin: 0 auto;
		color: #fff;
		font-size: 30rpx;
		height: 96rpx;
		line-height: 96rpx;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		position: flex;
		bottom: 0;
		left: 0;
		border-radius: 0;
		padding: 0;
		margin-left: 5%;
		text-align: center;
		/* padding-left: -5rpx; */
		border-top-left-radius: 50rpx;
		border-bottom-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		border-bottom-right-radius: 50rpx;
		letter-spacing: 3rpx;
		background-image: linear-gradient(to right, #9a9ba1 0%, #9a9ba1 100%);
	}
</style>
